<section class="product-main">
  <div class="product-main-wrapper">
    <div>
      <img
        width="600"
        height="600"
        loading="lazy"
        src="{{ product.featured_image | image_url}}"
      >
    </div>
    <div>
      <h2>{{ product.title }}</h2>
      <p>{{ product.price | money }}</p>
      <p>{{ product.description }}</p>
      <h3>Select Size</h3>
      {% form 'product', product %}
        <select name="id">
          {% for variant in product.variants %}
            <option value="{{variant.id }}">
              {{ variant.title }}
            </option>
          {% endfor %}
        </select>
      {% endform %}
      <button type="submit">Add to Card</button>
      <input type="submit" value="Add to cart">
    </div>
  </div>
</section>

<style>
   .product-main {
     background: {{ section.settings.background }}
     ;
     color: {{ section.settings.text_color }}
     ;
     padding: 10px;
   }

   .product-main-wrapper {
     display: flex;
  }
</style>

{% schema %}
{
  "name": "Product-main",
  "settings": [
    {
      "type": "color",
      "id": "background",
      "label": "Background",
      "default": "#F4F4F4"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text",
      "default": "#000000"
    }
  ],
  "presets": [
    {
      "name": "product-main"
    }
  ]
}
{% endschema %}
